<template>
  <view class="w-[750rpx]">
    <view class="bg-white mx-4 mt-4 rounded-3xl p-6 shadow-sm">
      <view class="flex items-center justify-between">
        <text class="text-lg font-semibold text-gray-800">自定义</text>
        <view
          class="flex items-center text-gray-500 text-sm"
          @click="toggleCustom"
        >
          <text>{{ isCustomExpanded ? '收起' : '展开' }}</text>
          <IconFont
            :name="isCustomExpanded ? 'arrow-up' : 'arrow-down'"
            size="12"
            class="ml-2"
          />
        </view>
      </view>

      <view
        v-show="isCustomExpanded"
        class="border-dashed mt-6 border-green-500 p-[10rpx] mt-[20rpx] rounded-[10rpx]"
      >
        <view
          class="flex justify-center items-center"
          @click="handleAddRecord"
        >
          <IconFont name="plus" size="40" color="#00b26a" />
          <text class="ml-[10rpx] text-[30rpx] text-[#00b26a]">新增项目</text>
        </view>
      </view>
    </view>

    <!-- 手动记录数据入口按钮 -->
    <view class="mx-[30rpx] my-[20rpx]">
      <view
        class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between"
        @click="handleAddRecord"
      >
        <view class="flex items-center">
          <view
            class="w-[96rpx] h-[96rpx] bg-blue-500 rounded-full flex items-center justify-center mr-[32rpx]"
          >
            <IconFont name="edit" size="32" color="white" />
          </view>
          <view>
            <view class="text-[32rpx] font-semibold text-gray-800"
              >手动记录数据</view
            >
            <view class="text-[24rpx] text-gray-500 mt-[8rpx]"
              >记录血压、血糖等健康数据</view
            >
          </view>
        </view>
        <IconFont name="arrow-right" size="24" color="#999" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { IconFont } from '@nutui/icons-vue-taro'
import { ref } from 'vue'
import { useHealthStore } from '@/store'

// 使用 health store
const healthStore = useHealthStore()

// 定义是否展开自定义区域的状态
const isCustomExpanded = ref(true)

// 切换自定义区域的展开状态
const toggleCustom = () => {
  isCustomExpanded.value = !isCustomExpanded.value
}

// 处理添加记录
const handleAddRecord = () => {
  healthStore.openAddDialog()
}
</script>
